import React from 'react';
import {connect} from 'react-redux';
import {messages} from "share/common";
import {Popover, Badge, Tooltip} from 'antd';
import UAVService from 'components/template/user-auth-viewer/user-auth-viewer.service';
import 'styles/components/template/user-auth-viewer/user-auth-viewer.scss';

class UserAuthRole extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      userInfo: {}
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    this.setState({
      userInfo: this.props.userInfo
    })
    document.addEventListener('click', this.hidden, true);
  }

  getAuth = (e) => {
    e.stopPropagation();
    let {userInfo} = this.state;
    let params = {
      userId: userInfo.id
    };
    UAVService.getUsePermission(params)
      .then(res => {
        let auth = res.data.map(item => {
          return item.permissionName
        });
        userInfo._auth = auth.join();
        this.setState({
          userInfo,
          visible: true
        })
      })
  }
  toggle = (e) => {
    e.stopPropagation();
    let {visible} = this.state;
    this.setState({
      visible: !visible
    })
  }

  hidden = () => {
    this.setState({
      visible: false
    })
  }
  render() {
    let {userInfo, visible} = this.state;
    return (
      <div className="user-auth-role">
        {!userInfo._auth && <div className='btn'
                                 onClick={(e) => {
                                   this.getAuth(e)
                                 }}>{messages('components.key997')/*点击查看*/}</div>}
        {userInfo._auth &&
        <Popover placement="topLeft"
                 trigger="click"
                 visible={visible}
                 overlayClassName='user-auth-role-popover'
                 content={<div className='text-wrap'>
                   <div className='text'>
                     <div>
                       {userInfo.fullName}:
                     </div>
                     <div>{userInfo._auth}</div>
                   </div>
                 </div>}
                 overlayStyle={{maxWidth: 500}}>
          <div className='btn'
               onClick={this.toggle}>
            {messages('components.key997')/*点击查看*/}
            </div>
        </Popover>}
      </div>
    );
  }
}

UserAuthRole.propTypes = {
  userInfo: React.PropTypes.any,//用户信息
};

UserAuthRole.contextTypes = {
  router: React.PropTypes.object
};
UserAuthRole.defaultProps = {};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(UserAuthRole);



